import React from 'react';
import { Drawer, Typography, Descriptions, Table, Tabs, Card, Divider, Tag, Space } from 'antd';
import { createStyles } from 'antd-style';
import { CopyOutlined, LinkOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { TabPane } = Tabs;

interface DemoCode {
  key:string,
  code:string
}

const useStyles = createStyles(({ token }) => ({
  drawer: {
    '& .ant-drawer-header': {
      borderBottom: `1px solid ${token.colorBorderSecondary}`,
      padding: '16px 24px',
    },
    '& .ant-drawer-body': {
      padding: '24px',
    },
  },
  apiTitle: {
    marginBottom: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  apiDesc: {
    marginBottom: '24px',
    color: token.colorTextSecondary,
  },
  sectionTitle: {
    marginTop: '24px',
    marginBottom: '16px',
    fontWeight: 'bold',
    fontSize: '16px',
    position: 'relative',
    paddingLeft: '12px',
    '&::before': {
      content: '""',
      position: 'absolute',
      left: 0,
      top: '50%',
      transform: 'translateY(-50%)',
      width: '4px',
      height: '16px',
      backgroundColor: token.colorPrimary,
      borderRadius: '2px',
    },
  },
  urlSection: {
    backgroundColor: token.colorBgContainer,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadius,
    padding: '16px',
    marginBottom: '24px',
  },
  urlItem: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '8px',
    '&:last-child': {
      marginBottom: 0,
    },
  },
  urlLabel: {
    width: '100px',
    color: token.colorTextSecondary,
    flexShrink: 0,
  },
  urlValue: {
    flex: 1,
    wordBreak: 'break-all',
  },
  methodTag: {
    fontWeight: 'bold',
  },
  copyIcon: {
    marginLeft: '8px',
    cursor: 'pointer',
    color: token.colorTextSecondary,
    '&:hover': {
      color: token.colorPrimary,
    },
  },
  paramTable: {
    marginBottom: '24px',
    '& .ant-table-thead > tr > th': {
      backgroundColor: token.colorBgLayout,
      fontWeight: 'bold',
    },
  },
  codeBlock: {
    backgroundColor: '#f5f5f5',
    borderRadius: token.borderRadius,
    padding: '16px',
    fontFamily: 'monospace',
    fontSize: '14px',
    overflowX: 'auto',
    marginBottom: '24px',
    whiteSpace: 'pre',
    wordWrap: 'normal',
    maxWidth: '100%',
  },
  tabContent: {
    padding: '16px 0',
  },
}));

interface ApiDrawerProps {
  visible: boolean;
  onClose: () => void;
  api: any; // 使用实际的API类型
}

const ApiDrawer: React.FC<ApiDrawerProps> = ({ visible, onClose, api }) => {
  const { styles } = useStyles();

  // 模拟请求参数数据
  const requestParams = [
    {
      key: 'key',
      name: 'key',
      required: '是',
      type: 'string',
      description: '在个人中心->我的数据接口名称上方查看',
    },
    {
      key: 'realname',
      name: 'realname',
      required: '是',
      type: 'string',
      description: '姓名',
    },
    {
      key: 'idcard',
      name: 'idcard',
      required: '是',
      type: 'string',
      description: '身份证号码',
    },
  ];

  // 模拟返回参数数据
  const responseParams = [
    {
      key: 'status',
      name: 'status',
      type: 'number',
      description: '返回码',
    },
    {
      key: 'message',
      name: 'message',
      type: 'string',
      description: '返回说明',
    },
    {
      key: 'result',
      name: 'result',
      type: 'object',
      description: '返回结果集',
    },
    {
      key: 'timestamp',
      name: 'timestamp',
      type: 'number',
      description: '时间戳',
    },
  ];

  // 模拟返回示例
  const responseExample = `{
  "error_code": 0,
  "reason": "成功",
  "result": {
    "realname": "张三",
    "idcard": "350111111111111111",
    "isok": true
  }
}`;

  // 请求参数表格列定义
  const requestColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '必填',
      dataIndex: 'required',
      key: 'required',
      width: '10%',
      render: (record: any) => {
        if (record.required) {
          return "true";
        }
        return "false"
      }
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: '15%',
    },
    {
      title: '说明',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  // 返回参数表格列定义
  const responseColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: '15%',
    },
    {
      title: '说明',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  if (!api) return null;

  return (
    <Drawer
      title={null}
      placement="right"
      onClose={onClose}
      open={visible}
      width={700}
      className={styles.drawer}
      bodyStyle={{ padding: '0 24px 24px 24px' }}
    >
      <div>
        <div className={styles.apiTitle}>
          <Title level={4}>{api.name || 'api名称'}</Title>
        </div>
        <Paragraph className={styles.apiDesc}>
          {api.description || 'api描述'}
        </Paragraph>

        <div className={styles.urlSection}>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>接口地址：</span>
            <Text className={styles.urlValue} copyable={{ icon: [<CopyOutlined key="copy-icon" />] }}>
              {api.url}
            </Text>
          </div>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>接口地址：</span>
            <Text className={styles.urlValue} copyable={{ icon: [<CopyOutlined key="copy-icon" />] }}>
              {api.demoUrl}
            </Text>
          </div>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>请求方式：</span>
            <div className={styles.urlValue}>
              <Tag color="blue" className={styles.methodTag}>{api.method}</Tag>
            </div>
          </div>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>返回类型：</span>
            <div className={styles.urlValue}>
              <Tag color="green" className={styles.methodTag}>{api.responseType}</Tag>
            </div>
          </div>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>接口描述：</span>
            <div className={styles.urlValue}>
              {api.description}
            </div>
          </div>
          <div className={styles.urlItem}>
            <span className={styles.urlLabel}>接口测试：</span>
            <div className={styles.urlValue}>
              <a href="#" target="_blank" rel="noopener noreferrer">
                <LinkOutlined /> API测试工具
              </a>
            </div>
          </div>
        </div>

        <Divider style={{ margin: '24px 0' }} />

        <Tabs defaultActiveKey="1">
          <TabPane tab="接口文档" key="1">
            <div className={styles.tabContent}>
              <div className={styles.sectionTitle}>请求参数说明：</div>
              <Table
                dataSource={api.queryParams}
                columns={requestColumns}
                pagination={false}
                className={styles.paramTable}
                size="middle"
                rowKey="key"
              />

              <div className={styles.sectionTitle}>请求头说明：</div>
              <Table
                dataSource={api.headers}
                columns={requestColumns}
                pagination={false}
                className={styles.paramTable}
                size="middle"
                rowKey="key"
              />

              <div className={styles.sectionTitle}>返回参数说明：</div>
              <Table
                dataSource={responseParams}
                columns={responseColumns}
                pagination={false}
                className={styles.paramTable}
                size="middle"
                rowKey="key"
              />

              <div className={styles.sectionTitle}>返回示例：</div>
              <pre className={styles.codeBlock}>{responseExample}</pre>
            </div>
          </TabPane>
          <TabPane tab="错误码参照" key="2">
            <div className={styles.tabContent}>
              <Table
                dataSource={[
                  { key: '0', code: '0', message: '成功' },
                  { key: '10001', code: '10001', message: '错误的请求KEY' },
                  { key: '10002', code: '10002', message: '该KEY无请求权限' },
                  { key: '10003', code: '10003', message: 'KEY过期' },
                  { key: '10004', code: '10004', message: '错误的OPENID' },
                  { key: '10005', code: '10005', message: '应用未审核通过' },
                  { key: '10007', code: '10007', message: '未知的请求源' },
                  { key: '10008', code: '10008', message: '被禁止的IP' },
                  { key: '10009', code: '10009', message: '被禁止的KEY' },
                  { key: '10011', code: '10011', message: '当前IP请求超过限制' },
                  { key: '10012', code: '10012', message: '请求超过次数限制' },
                  { key: '10013', code: '10013', message: '测试KEY超过请求限制' },
                  { key: '10014', code: '10014', message: '系统内部异常' },
                  { key: '10020', code: '10020', message: '接口维护' },
                  { key: '10021', code: '10021', message: '接口停用' },
                ]}
                columns={[
                  { title: '错误码', dataIndex: 'code', key: 'code' },
                  { title: '说明', dataIndex: 'message', key: 'message' },
                ]}
                pagination={false}
                className={styles.paramTable}
                size="middle"
              />
            </div>
          </TabPane>
          <TabPane tab="示例代码" key="3">
            <div className={styles.tabContent}>

              <Tabs defaultActiveKey="java" tabPosition="left">
                {
                  api.democCodes || [{key:"java",code:"public static void main(String[] args){}"}].map(demoCode => {
                    return (
                      <TabPane tab={demoCode.key} key={demoCode.key}>
                        {demoCode.code || ""}
                      </TabPane>)
                  })
                }
              </Tabs>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </Drawer>
  );
};

export default ApiDrawer;
